import { defineComponent, reactive, Teleport } from "vue";
import styles from "./ClientNotice.module.less";
import LIcon from "@/components/public/lIcon/lIcon";

export default defineComponent({
  setup(props, { expose }) {
    const state = reactive({
      noticeTitleState: "",
      noticeState: "",
      isShow: false,
    })
    // 打开弹窗
    const open = (noticeTitleState: string, noticeState: string) => {
      state.noticeTitleState = noticeTitleState || "";
      state.noticeState = noticeState || "";
      state.isShow = true;
    }
    expose({
      open,
    })
    return () => (
        <div class={styles['floating']} v-show={state.isShow} onClick={() => { state.isShow = false }}>
          <div class={styles['card']} onClick={(e) => { e.stopPropagation() }}>
            <div class={styles['card-header']}>
              <span class={styles.title}>{state.noticeTitleState}</span>
              <LIcon type="icon-delete-x" class={styles['icon-delete']} onClick={() => { state.isShow = false }} />
            </div>
            <div class={styles['card-container']}>
              <div v-html={state.noticeState}></div>
            </div>
          </div>
        </div>
    )
  }
})